<style>
    .pagination {
        /*display: inline-block;*/
        padding-left: 0;
        margin: 20px 0;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<!--  / warpper  -->
<main class="warpper">

    {notempty name="$brand"}
    <div class="brandSec">
        <div class="container">
            <ul class="brandSec_list">
                {foreach $brand as $row}
                <li>
                    <a href="{:url('index/index/newsdetail')}?id={$row.id}">
                        <div class="brandSec_img">
                            <div class="brandSec_imgBox"
                                 style="background: url(__CDN__{$row.image}) center top/cover no-repeat;"></div>
                            <div class="brandSec_icon">
                                <img src="__CDN__/static/images/arrow3.png" alt="">
                            </div>
                        </div>
                        <div class="brandSec_txt">
                            <p>{$row.title}</p>
                            <h6>{$row.date}</h6>
                        </div>
                    </a>
                </li>
                {/foreach}
            </ul>
            {$brand->render()}
        </div>
    </div>
    {/notempty}

</main>
<!--  / warpper  -->

<script>
    $(function () {


    })

    $(window).ready(function () {

    })
    $(window).load(function () {

        if ($(window).width() <= 768) {
            var h = $(window).scrollTop()

            for (var i = 0; i < $('.brandSec_list li').length; i++) {
                if (h > $('.brandSec_list li').eq(i).offset().top - $(window).height() / 0.8) {
                    $('.brandSec_list li').eq(i).addClass('on');
                }
            }
        }
    })
    $(window).resize(function () {

    })

    $(window).scroll(function () {
        var h = $(window).scrollTop()

        for (var i = 0; i < $('.brandSec_list li').length; i++) {
            if (h > $('.brandSec_list li').eq(i).offset().top - $(window).height() / 0.8) {
                $('.brandSec_list li').eq(i).addClass('on');
            }
        }


    })

</script>